<template>
  <div>
    <!-- 搜索栏 -->
    <div class="search-bar" style="display: flex; justify-content: center; margin-bottom: 20px;">
      <!-- 分类选择 -->
      <el-select v-model="selectedCategory" placeholder="选择分类" class="category-select" style="width: 20%; max-width: 150px; margin-right: 10px;">
        <el-option label="全部" value="全部"></el-option>
        <el-option label="传统音乐" value="传统音乐"></el-option>
        <el-option label="新国风流行" value="新国风流行"></el-option>
        <el-option label="戏曲融合" value="戏曲融合"></el-option>
        <el-option label="主题文化" value="主题文化"></el-option>
        <el-option label="地域特色" value="地域特色"></el-option>
      </el-select>

      <!-- 查询输入框 -->
      <el-input 
        placeholder="请输入文化背景名称" 
        v-model="queryStr" 
        class="input-with-select" 
        style="width: 50%; max-width: 400px; margin-right: 10px;">
      </el-input>

      <!-- 查询按钮 -->
      <el-button 
        class="button" 
        @click="queryInfo" 
        style="margin-top: 6px; background-color: transparent; border: 1px solid #dcdfe6; color: #333;">
        查询
      </el-button>
    </div>

    <!-- 内容展示 -->
    <el-row gutter="30">
      <el-col v-for="(cultureBackground, index) in filteredCultureBackground" :key="index" :span="6" class="culture-background-item">
        <el-card class="culture-background-out">
          <!-- 使用 @click 事件触发跳转 -->
          <div @click="goToCultureBackgroundDetail(cultureBackground.culture_background_detail_id)">
            <img :src="'http://localhost:8080/images/upload/' + cultureBackground.image" alt="文化背景封面" class="culture-background-cover"/>
            <div class="culture-background-info">
              <h4>{{ cultureBackground.title }}</h4>
              <p>{{ cultureBackground.type }}</p> <!-- 显示文化背景类型 -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cultureBackgroundList: [], // 用户收藏的所有文化背景数据
      filteredCultureBackground: [], // 过滤后的文化背景列表
      queryStr: '', // 查询条件
      selectedCategory: '全部', // 选择的分类
      userId: sessionStorage.getItem("user_id"), // 获取用户ID
    };
  },
  created() {
    this.fetchCollectionData(); // 初始化获取用户的收藏数据
  },
  methods: {
    fetchCollectionData() {
      // 获取用户收藏的文化背景数据
      axios
        .get(`/api/culture-background-collection/${this.userId}`) // 假设API返回该用户的收藏列表
        .then((response) => {
          this.cultureBackgroundList = response.data;
          this.filteredCultureBackground = this.cultureBackgroundList; // 默认显示全部数据
        })
        .catch((error) => {
          console.error('获取收藏文化背景数据失败：', error);
        });
    },

    queryInfo() {
      // 搜索
      let filteredList = this.cultureBackgroundList;

      // 如果选择了分类，先根据分类过滤
      if (this.selectedCategory !== '全部') {
        filteredList = filteredList.filter(item => item.type === this.selectedCategory);
      }

      // 根据搜索关键词过滤
      if (this.queryStr.trim().length > 0) {
        filteredList = filteredList.filter(item => item.title.includes(this.queryStr.trim()));
      }

      // 更新显示的过滤后的数据
      this.filteredCultureBackground = filteredList;
      console.log('queryInfo()......', this.queryStr, this.selectedCategory);
    },

    // 点击卡片后跳转到文化背景详情页
    goToCultureBackgroundDetail(cultureBackgroundId) {
      // 使用 $router.push 进行页面跳转
      this.$router.push(`/Culture/back/${cultureBackgroundId}`);
    },
  },
};
</script>

<style>
.culture-background-out {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.culture-background-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.culture-background-cover {
  width: 100%;
  height: 200px; /* 固定图片的高度，确保占据卡片的上方区域 */
  object-fit: cover; /* 确保图片填充区域，不变形 */
}

.culture-background-info {
  padding: 10px;
  flex-grow: 1; /* 让文本区域填充剩余空间 */
  text-align: center;
}

.culture-background-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
}

.culture-background-info p {
  font-size: 14px;
  color: #777;
}

.search-bar {
  margin-bottom: 20px;
  text-align: center;
}

.category-select {
  margin-right: 10px;
  margin-top: 6px;
}

.search-button {
  margin-left: 10px;
}

.input-with-select {
  margin-right: 10px;
}
</style>
